<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Example</title>
  <style media="screen">
    * {
      margin: 2px;
      padding: 4px;
      border-collapse: collapse;
    }
  </style>
</head>

<body>
  <table border="1">
    <tr>
      <th>Name:</th>
      <td id="name"></td>
    </tr>
    <tr>
      <th>Color:</th>
      <td id="color"></td>
    </tr>
    <tr>
      <th>Size:</th>
      <td id="size"></td>
    </tr>
    <tr>
      <th>State:</th>
      <td id="state"></td>
    </tr>
    <tr>
      <th>Event:</th>
      <td id="event"></td>
    </tr>
  </table>
  <button id="banana">Banana</button>
  <button id="apple">Apple</button>

  <script type="text/javascript">
    if (window.history.state) {
      displayState(window.history.state);
      document.getElementById('state').innerHTML = "Yes";
    } else {
      document.getElementById('name').innerHTML = "No Selection";
    }

    window.onpopstate = function(e) {
      displayState(e.state);
      document.getElementById('event').innerHTML = "Yes";
    }

    var buttons = document.getElementsByTagName('button');
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].onclick = function(e) {
        var stateObj;
        if (e.target.id == "banana") {
          stateObj = {
            name: "banana",
            color: "yellow",
            size: "large"
          }
        } else {
          stateObj = {
            name: "apple",
            color: "red",
            size: "medium"
          }
        }
        window.history.pushState(stateObj, "");
        displayState(stateObj);
      };
    }

    function displayState(stateObj) {
      document.getElementById('name').innerHTML = stateObj.name;
      document.getElementById('color').innerHTML = stateObj.color;
      document.getElementById('size').innerHTML = stateObj.size;
    }
  </script>
</body>

</html>
